[CSS] Inspecteur d'élément.
Un jour, alors que je demandais de l'aide à un ami pour modifier le CSS de l'un de mes premiers forums, il m'a montré l'inspecteur d'élément de Firefox (ça existe dans la plupart des navigateurs web modernes).
Pour moi qui me suis autoformé au CSS (au sens où j'ai appris tout seul devant des tutos), l'examinateur d'élément m'a littéralement fait faire un bon au niveau de ma compréhension des relations qui existent entre les différents éléments d'un site web et du CSS en général.
L'inspecteur d'élément c'est quoi?
Lorsque l'on fait un clique droit sur une page web l'option "Inspecter" nous est proposée.
Si l'on clique dessus, ça ouvre une interface utilisateur dont les trois éléments principaux sont:
- Le bouton de sélection d'éléments
- Le panneau HTML
- Le panneau CSS
Le bouton de sélection d'éléments:
En cliquant dessus, puis en le déplaçant sur la page web, on va pouvoir sélectionner un élément en particulier.
Pour cela il suffit de cliquer sur l'élément en question, afin qu'il soit sélectionné dans le panneau HTML.
Le panneau HTML:
Dans le panneau HTML, l'élément sélectionné via le bouton de sélection est surligné.
On peut aussi parcourir le code HTML directement via le panneau, en scrollant ou en déroulant le code contenu dans certaines balises.
Le panneau CSS
Le code CSS lié à l'élément sélectionner s'affiche dans le panneau CSS.
Le code est divisé en plusieurs parties dont l'élément seul mais aussi les hérédités de CSS (les modifications liées à la balise ou à la classe de l'élément par exemple), qui impactent l'élément.
C'est dans ce panneau que l'on peut rentrer directement du code CSS et voir les modifications en direct sur la page web.
C'est super pratique pour faire des tests sans avoir à modifier des fichiers.
Les modifications sont visibles que pour nous (c'est-à-dire seulement sur la machine que l'on utilise) et seront supprimées dès lors que l'on actualisera la page.
L'inspecteur CSS pour apprendre, mais pas que.
Si comme moi vous aimez trifouiller du CSS ou regarder comment sont construites certaines pages web, cet outil sera parmi vos meilleurs amis.
Cependant, il est tout à fait possible de s'en servir à d'autre fins.
Par exemple, pour faire sauter certaines mécaniques de pages web qui polluent notre champ de vision ou qui nous empêchent d'accéder à du contenu.
Plus d'info sur l'inspecteur d'élément ici et ici.